@charset "UTF-8";

/* 移动端侧边栏样式 */
/* 批量生成 0-100 的 padding 和 margin */
.margin-loop(@counter) when (@counter >=0) {
  @value: (1px * @counter); // 边距

  /* padding */
  .p-@{counter} {
    padding: @value;
  }

  .px-@{counter} {
    padding-left: @value;
    padding-right: @value;
  }

  .py-@{counter} {
    padding-top: @value;
    padding-bottom: @value;
  }

  .pt-@{counter} {
    padding-top: @value;
  }

  .pr-@{counter} {
    padding-right: @value;
  }

  .pb-@{counter} {
    padding-bottom: @value;
  }

  .pl-@{counter} {
    padding-left: @value;
  }

  /* margin */
  .m-@{counter} {
    margin: @value;
  }

  .mx-@{counter} {
    margin-left: @value;
    margin-right: @value;
  }

  .my-@{counter} {
    margin-top: @value;
    margin-bottom: @value;
  }

  .mt-@{counter} {
    margin-top: @value;
  }

  .mr-@{counter} {
    margin-right: @value;
  }

  .mb-@{counter} {
    margin-bottom: @value;
  }

  .ml-@{counter} {
    margin-left: @value;
  }

  .margin-loop((@counter - 1)); // 递归调用自身
}

.margin-loop(500);


/* 批量生成 16-60 的 font-size */
.text-loop(@counter) when (@counter >=16) {
  .text-@{counter} {
    font-size: (1px * @counter);
  }

  .text-loop((@counter - 1));
}

.text-loop(60);
